<!--新增会员-->
<template>
	<section class="webview fixHeight">
		<el-scrollbar style="height:100%">
			<!--      百科-->
			<el-form v-if="$route.query.type == 1" ref="form" :model="detail" label-width="100px" class="form">
				<el-form-item label="所属分类">
					<el-select style='height: 40px;' v-model="detail.type" @change='sel'  placeholder="一级分类">
						<el-option 
						  v-for="item in list1"
						  :key="item.id"
						  :label="item.title"
						  :value="item.simplify"
						/>
					</el-select>
					<el-select style='margin-top: 12px;height: 40px;' v-model="detail.twoLevelType"  placeholder="二级分类">
						<el-option
						  v-for="item in list2"
						  :key="item.id"
						  :label="item.title"
						  :value="item.simplify"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="上传封面">
					<div class="picList" v-if="detail.coverPhoto != ''">
						<div class="item"  >
							<img class="pic" :src="detail.coverPhoto" alt>
							<i class="el-icon-delete delIcon hand" @click="handlesRemove(item,index)" />
						</div>
					</div>
					<div class="item itemNo" v-if="detail.coverPhoto == ''">
						<el-upload :action="Is.sevenDomain2" :data="qiniuData" multiple name="file" :show-file-list="false" :before-upload="handleUpload"
						 :on-success="handlesSuccess">
							<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，只能上传1张，且不超过10M</div> -->
							<div class="el-upload el-upload--picture-card">
								<i slot="default" class="el-icon-plus" />
							</div>
						</el-upload>
					</div>
				</el-form-item>
				<el-form-item label="资讯标题">
					<el-input v-model="detail.title" />
				</el-form-item>
				<el-form-item label="编辑内容">
					<quill-editor v-model="detail.content"  style='height: 200px;margin-bottom: 200px;' ref="myQuillEditor"  :options="editorOption">
					     </quill-editor>
					<!-- <el-input type="textarea" :rows="4" placeholder="请输入..." v-model="detail.content" /> -->
				</el-form-item>



				<el-form-item>
					<el-button type="primary" @click="submit">提交</el-button>
					<el-button @click="cancel">返回</el-button>
				</el-form-item>
			</el-form>

			<!--      视频-->
			<el-form v-if="$route.query.type == 3" ref="form" :model="detail" label-width="100px" class="form">
				<el-form-item label="创建人名称">
					<el-input v-model="detail.createUserName" />
				</el-form-item>
				<el-form-item label="创建人头像">
					<div class="picList" v-if="detail.createHeadPortrait != ''">
						<div class="item"  >
							<img class="pic" :src="detail.createHeadPortrait" alt>
							<i class="el-icon-delete delIcon hand" @click="handlesRemoves(item,index)" />
						</div>
					</div>
					<div class="item itemNo" v-if="detail.createHeadPortrait == ''">
						<el-upload :action="Is.sevenDomain2" :data="qiniuData" multiple name="file" :show-file-list="false" :before-upload="handleUpload"
						 :on-success="handlesSuccesss">
							<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，只能上传1张，且不超过10M</div> -->
							<div class="el-upload el-upload--picture-card">
								<i slot="default" class="el-icon-plus" />
							</div>
						</el-upload>
					</div>
				</el-form-item>
				<el-form-item label="上传封面">
					<div class="picList" v-if="detail.coverPhoto != ''">
						<div class="item"  >
							<img class="pic" :src="detail.coverPhoto" alt>
							<i class="el-icon-delete delIcon hand" @click="handlesRemove(item,index)" />
						</div>
					</div>
					<div class="item itemNo" v-if="detail.coverPhoto == ''">
						<el-upload :action="Is.sevenDomain2" :data="qiniuData" multiple name="file" :show-file-list="false" :before-upload="handleUpload"
						 :on-success="handlesSuccess">
							<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，只能上传1张，且不超过10M</div> -->
							<div class="el-upload el-upload--picture-card">
								<i slot="default" class="el-icon-plus" />
							</div>
						</el-upload>
					</div>
				</el-form-item>
				<el-form-item  label="上传视频">
				  <el-upload
				    accept="video/mp4"
					:action="Is.sevenDomain2"
				    :data="qiniuData"
					  :before-upload="handleUpload" 
				    :show-file-list="true"
				    :before-remove="(res)=>{detail.videoPath='';return true}"
				    :on-success="successVideo"
				  >
				    <span
				      slot="tip"
				      class="el-upload__tip"
				      style="padding-left:15px;"
				    >建议上传mp4格式视频</span>
					 <!-- <el-progress v-if="videoFlag == true" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress> -->
				    <div class="avatarWrap">
				      <el-button type="success" round class="button">点击上传</el-button>
				    </div>
				  </el-upload>
				 
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submit">提交</el-button>
					<el-button @click="cancel">返回</el-button>
				</el-form-item>
			</el-form>
			<!--      头条-->
			<el-form v-if="$route.query.type == 4" ref="form" :model="detail" label-width="100px" class="form">
				<el-form-item label="创建人名称">
					<el-input v-model="detail.createUserName" />
				</el-form-item>
				<el-form-item label="创建人头像">
					<div class="picList" v-if="detail.createHeadPortrait != ''">
						<div class="item"  >
							<img class="pic" :src="detail.createHeadPortrait" alt>
							<i class="el-icon-delete delIcon hand" @click="handlesRemoves(item,index)" />
						</div>
					</div>
					<div class="item itemNo" v-if="detail.createHeadPortrait == ''">
						<el-upload :action="Is.sevenDomain2" :data="qiniuData" multiple name="file" :show-file-list="false" :before-upload="handleUpload"
						 :on-success="handlesSuccesss">
							<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，只能上传1张，且不超过10M</div> -->
							<div class="el-upload el-upload--picture-card">
								<i slot="default" class="el-icon-plus" />
							</div>
						</el-upload>
					</div>
				</el-form-item>
				<el-form-item label="上传封面">
					<div class="picList" v-if="detail.coverPhoto != ''">
						<div class="item"  >
							<img class="pic" :src="detail.coverPhoto" alt>
							<i class="el-icon-delete delIcon hand" @click="handlesRemove(item,index)" />
						</div>
					</div>
					<div class="item itemNo" v-if="detail.coverPhoto == ''">
						<el-upload :action="Is.sevenDomain2" :data="qiniuData" multiple name="file" :show-file-list="false" :before-upload="handleUpload"
						 :on-success="handlesSuccess">
							<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，只能上传1张，且不超过10M</div> -->
							<div class="el-upload el-upload--picture-card">
								<i slot="default" class="el-icon-plus" />
							</div>
						</el-upload>
					</div>
				</el-form-item>
				<el-form-item label="资讯标题">
					<el-input v-model="detail.title" />
				</el-form-item>
				<el-form-item label="编辑内容">
							<!-- <el-input v-model="l.content" class="textArea" maxlength='500' type="textarea" :rows="4" placeholder="请输入..." /> -->
							
							 <quill-editor ref="myTextEditor"
							               v-model="detail.content"
							               :config="editorOption" style='height: 200px;margin-bottom: 200px;'>
							 </quill-editor>
					
					<!-- <el-input type="textarea" :rows="4" placeholder="请输入..." v-model="detail.content" /> -->
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submit">提交</el-button>
					<el-button @click="cancel">返回</el-button>
				</el-form-item>
			</el-form>
		</el-scrollbar>
	</section>
</template>
<script>
	import {
		craeteToken,
		informationAdd,
		wikipediaOneClassList,
		wikipediaClassList,
		addOrUpdate,
		zxupdate
	} from '@/api/api';
	import { quillEditor } from 'vue-quill-editor'
	// import {
	//     quillEditor
	//   } from 'vue-quill-editor'
	  import 'quill/dist/quill.core.css'
	  import 'quill/dist/quill.snow.css'
	  import 'quill/dist/quill.bubble.css'
	export default {
		 components: {
		    quillEditor
		  },
		data() {
			return {
				showPicturess: [],
				list1:[],
				 editorOption: {},
				mainResidentialId:'',
				list2:[],
				type: 0,
				detail: {},
				upload_qiniu_addr: 'http://qinniu.qimazf.com/',
				qiniuData: {
					key: "aNmGG9Cs19xKonjerU5T47y4K9OfUqSAO20-3vIj",
					token: ""
				},
				id:0
			}
		},
		created() {
			this.getQiniuToken()
			this.type = this.$route.query.type
			wikipediaOneClassList().then(data => {
				if(data.code == 200){
					this.list1=data.data;
					wikipediaClassList({simplify:data.data[0].simplify}).then(datas => {
						if(datas.code == 200){
							this.list2=datas.data
						}
					})
				}
			})
			if (this.$route.query.type == 1) {
				if(this.$route.query.id){
						  var data=JSON.parse( this.$route.query.id );
						      this.detail = data
						     this.id=data.id
				}else{
					this.detail = {
						"content": "",
						  "coverPhoto": "",
						  "isUse": true,
						  "title": "",
						  "twoLevelType": "",
						  "type": ""
					}
				}
				
				
				
			}  else if (this.$route.query.type == 3) {
				if(this.$route.query.id){
						  var data=JSON.parse( this.$route.query.id );
						      this.detail = data
						     this.id=data.id
				}else{
					this.detail = {
						"coverPhoto":"",
						"createHeadPortrait":"",
						"createUserName":"",
						"videoLink":'',
						"type": "cms_video",
					}
				}
				
			} else if (this.$route.query.type == 4) {
				if(this.$route.query.id){
						  var data=JSON.parse( this.$route.query.id );
						      this.detail = data
						     this.id=data.id
				}else{
					this.detail = {
						"content": "",
						"coverPhoto":"",
						"createHeadPortrait":"",
						"createUserName":"",
						"title": "",
						"type": "cms_headlines",
					}
				}
				
			}
		},
		methods: {
			sel(){
				this.list2=[]
				wikipediaClassList({simplify:this.detail.type}).then(datas => {
					if(datas.code == 200){
						this.list2=datas.data
					}
				})
			},
			successVideo(res){
				this.detail.videoLink='';
				this.detail.videoLink=this.upload_qiniu_addr + res.key;
			},
			submit(){
				const _this = this;
				var that=this;
				var da=that.detail
				if(this.type==1){
					
					addOrUpdate(da).then(data => {
					  Is.tip('添加成功')
					   this.$router.go(-1)
					})
				}else{
					if(this.id!=0){
						zxupdate(da).then(data => {
						  Is.tip('编辑成功')
						   this.$router.go(-1)
						})
					}else{
						informationAdd(da).then(data => {
						  Is.tip('添加成功')
						   this.$router.go(-1)
						})
					}
				}
				
			},
			handlesRemove(item,index){
				this.detail.coverPhoto = ''
			},
			handlesRemoves(item,index){
				this.detail.createHeadPortrait = ''
			},
			// 上传图片之前的验证
			handleUpload(file) {
				const timeStamp = new Date() - 0
				var num = Math.floor(Math.random() * 10000000)
				const copyFile = new File([file], `${timeStamp}_` + num);
				this.qiniuData.key = copyFile.name;
			},
			getQiniuToken: function() {
				const _this = this;
				craeteToken().then(({
					data
				}) => {
					console.log(data)
					_this.qiniuData.token = data
				})
			},
			handlesSuccess(res) {
				var that = this
				that.detail.coverPhoto = that.upload_qiniu_addr + res.key

			},
			handlesSuccesss(res) {
				var that = this
				that.detail.createHeadPortrait = that.upload_qiniu_addr + res.key

			},
			// 上传成功之后的回调

			// 返回
			cancel() {
				this.$router.back()
			},
		},
	}
</script>
